<template>
  <div class="tool-box">

    <div class="tool-box-left">

      <div class="box-item">试卷名称：<el-input v-model="postForm.title" style="width: 500px" /></div>
      <div class="box-item">试卷分类： <dic-catalog-tree v-model="postForm.catId" dic-code="tmpl_catalog" class="filter-item"
          width="500" style="margin-bottom: -20px" /></div>

    </div>

    <div class="tool-box-right">

      <el-dropdown style="float: right" @command="createGroup">
        <el-button type="primary">
          添加新的大题 <i class="el-icon-arrow-down el-icon--right" />
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="item in typeList" :key="item.value"
            :command="{ quType: item.value, title: item.title }">{{ item.title }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

  </div>

</template>

<script>

import DicCatalogTree from '@/components/DicTreeSelect'
import { fetchTree } from '@/api/sys/dict/value'
export default {
  name: 'JoinTopNav',
  components: { DicCatalogTree },
  props: {
    data: Object
  },
  data() {
    return {
      postForm: {
      },
      typeList: []
    }
  },
  watch: {
    data: {
      handler(val) {
        this.postForm = val
      }
    }
  },
  created() {
    this.postForm = this.data

    // 加载数据字典
    fetchTree({ dicCode: 'qu_type' }).then(res => {
      //TODO: 临时处理过滤掉多选题和组合题，这是由于这两种题型支持还不完善
      const filter_list = ['多选题', '组合题']
      const filted_data = res.data.filter(item => !filter_list.includes(item.title))
      this.typeList = filted_data
    })
  },
  methods: {
    // 创建事件
    createGroup(command) {
      this.$emit('create', command)
    }
  }
}
</script>

<style scoped>
.tool-box {
  padding: 20px;
  background: rgb(238, 238, 238);
  margin-bottom: 20px;
  border-radius: 5px;
  line-height: 45px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tool-box-left {
  flex-grow: 1;
  font-weight: 700;
}

.tool-box-right {
  width: 200px;
}

.box-item {
  display: flex;
  align-items: center;
}
</style>
